вот что сделал я
html
<div id="navigation">
<div id="nav">
<ul>
<li><span><a href="#">Главная</a></span></li>
<li><span><a href="#">Статьи</a></span></li>
</ul>
</div>
</div>
и css
#nav{
padding-left:236px;
}
#navigation a{
color:#000;
text-decoration:none;
font-weight:700;
cursor:pointer;
}
#navigation a:hover{
color:#ff6600;
}
#navigation ul li{
display:block;
list-style:none;
}
интересуют конкретно полосочки вот эти с боку
Спустя 12 минут, 7 секунд (22.06.2011 - 13:14) Winston написал(а):
А так сойдет ?
Свернутый текст
<style type="text/css">
#nav{
padding-left:236px;
}
#navigation a{
color:#000;
text-decoration:none;
font-weight:700;
cursor:pointer;
}
#navigation a:hover{
color:#ff6600;
}
#navigation ul li{
display:block;
list-style:none;
}
fieldset{
width: 100px;
}
</style>
<div id="navigation">
<div id="nav">
<ul>
<li><fieldset><legend><span><a href="#">Главная</a></legend></span></fieldset></li>
<li><fieldset><legend><span><a href="#">Статьи</a></legend></span></fieldset></li>
</ul>
</div>
</div>
Спустя 9 минут, 38 секунд (22.06.2011 - 13:24) nugle написал(а):
ну не совсем то, нужно без правой и верхней рамки и только чтоб не вниз шло, а вверх
Спустя 11 минут, 52 секунды (22.06.2011 - 13:35) Winston написал(а):
?
Свернутый текст
<style type="text/css">
#nav{
padding-left:236px;
}
#navigation a{
color:#000;
text-decoration:none;
font-weight:700;
cursor:pointer;
}
#navigation a:hover{
color:#ff6600;
}
#navigation ul li{
display:table;
list-style:none;
border-left: 1px solid;
border-right: 1px solid;
width: 100px;
}
fieldset{
width: 100px;
border: 1px solid;
border-bottom: 0;
border-right: 0;
border-left: 0;
}
</style>
<div id="navigation">
<div id="nav">
<ul>
<li><fieldset><legend><span><a href="#">Главная</a></legend></span></fieldset></li>
<li><fieldset><legend><span><a href="#">Статьи</a></legend></span></fieldset></li>
</ul>
</div>
</div>
Спустя 18 минут, 37 секунд (22.06.2011 - 13:54) nugle написал(а):
пока что только так получается
но не совсем то что хочется, нужно, чтобы при наведении, полоска опускалось именно к пункту на который навели
#navigation ul li{
display:table;
list-style:none;
border-left: 2px solid;
width: 120px;
padding-left:5px;
margin-top:8px;
}
fieldset{
width: 110px;
border: 2px solid;
border-bottom: 0;
border-right: 0;
border-left: 0;
padding-right:10px;
}
но не совсем то что хочется, нужно, чтобы при наведении, полоска опускалось именно к пункту на который навели
Спустя 1 час, 6 минут, 58 секунд (22.06.2011 - 15:01) Winston написал(а):
Свернутый текст
<style type="text/css">
#nav{
padding-left:236px;
}
#navigation a{
color:#000;
text-decoration:none;
font-weight:700;
cursor:pointer;
}
#navigation a:hover{
color:#ff6600;
}
#navigation li:hover hr {
color:#ff6600;
}
#navigation ul li:hover hr{
background-color:#ff6600;
height: 1px;
}
#navigation ul li{
display:table;
list-style:none;
border-left: 1px solid;
border-right: 1px solid;
width: 150px;
}
hr{
float: left;
width: 20px;
}
li a{
float: left;
}
</style>
<div id="navigation">
<div id="nav">
<ul>
<li><hr><span><a href="#">Главная</a><hr></span></li>
<li><span><hr><a href="#">Статьи</a><hr></span></li>
</ul>
</div>
</div>
Можно сделать всем hr visibility:hidden; a при наведении visibility:visible
Спустя 4 часа, 20 минут, 2 секунды (22.06.2011 - 19:21) nugle написал(а):
все равно не то, но спасибо за старания)