[Помогите] Сделать выпадающее меню со списком сайтов

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем inop2603, 29 ноя 2012.

  1. inop2603

    inop2603 Кто я? Я кот.

    Регистрация:
    30 сен 2012
    Сообщения:
    98
    Симпатии:
    18
    Так как я практикуюсь, у меня несколько сайтов. Хочу в уголке сделать менюшку, чтобы могли зайти на другие сайты. Вот, к примеру, как здесь: rubukkit.org
     
  2. sitemaster

    sitemaster

    Регистрация:
    8 дек 2012
    Сообщения:
    101
    Симпатии:
    27
    вот красивое меню
    html
    HTML:
    	<ul id="nav">
     
    		<li>
    			<a href="#" title="Информация о компании">Меню</a>
    			<ul>
    				<li><a href="#">Раз </a></li>
    				<li><a href="#">Дваа</a></li>
    	</ul>
    css
    HTML:
    /*------------------------------------*\
    СБРОС
    \*------------------------------------*/
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
    }-----------------*/
    #nav{
    float:left;
    width:100%;
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    }
    #nav li{
    float:left;
    margin-right:10px;
    position:relative;
    display:block;
    }
    #nav li a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
     
    text-shadow:1px 1px 1px rgba(0,0,0,0.75);
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    }
    #nav li a:hover{
    color:#fff;
    background:#6b0c36;
    background:rgba(107,12,54,0.75); 
    text-decoration:underline;
    }
     
    #nav ul{
    list-style:none;
    position:absolute;
    left:-9999px;
    opacity:0;
    -webkit-transition:0.25s linear opacity;
    }
     
    #nav ul a{
    white-space:nowrap;
    display:block;
    }
    #nav li:hover ul{ 
    left:0; 
    opacity:1; 
    }
    #nav li:hover a{
    background:#6b0c36;
    background:rgba(107,12,54,0.75);
    text-decoration:underline;
    }
    #nav li:hover ul a{
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.075s linear;
    }
    #nav li:hover ul li a:hover{ 
    background:#333;
    background:rgba(51,51,51,0.75);
    text-decoration:underline;
    -moz-transform:scale(1.05);
    -webkit-transform:scale(1.05);
    }
    
     
    inop2603 нравится это.