need css help

[DimitriDV]

I created a horizontal menu with a list:

[B]HTML:[/B]
<div id="menu">
	<ul>
		<li><a href="#"> Test </a></li>
        	<li><a href="#"> Test </a></li>
		<li><a href="#"> Test </a></li>
		<li><a href="#"> Test </a></li>
		<li><a href="#"> Test </a></li>
	</ul>
</div>


[B]CSS:[/B]
#menu ul{
	list-style: none;
}

#menu ul li{
	display: inline;
	margin-left: 110px;
	font-size: 13px;
	font-weight: bold;
}

now I want to show a dashed border underneath the links... when a user hovers the menu

 

[AusQB]

Change your code as follows. I gave the id "nav" to the list, just to make things cleaner in the CSS.

[B]HTML:[/B]
<div id="menu">
	<ul [COLOR="Red"]id="nav"[/COLOR]>
		<li><a href="#"> Test </a></li>
        	<li><a href="#"> Test </a></li>
		<li><a href="#"> Test </a></li>
		<li><a href="#"> Test </a></li>
		<li><a href="#"> Test </a></li>
	</ul>
</div>


[B]CSS:[/B]
[COLOR="Red"]div#menu[/COLOR] {
	list-style: none;
}

[COLOR="Red"]ul#nav li[/COLOR] {
	display: inline;
	margin-left: 110px;
	font-size: 13px;
	font-weight: bold;
}

ul#nav li a {
	color: #FFFFFF; (or whatever color you want)
}

ul#nav li a:link{
	color: #FFFFFF; (or whatever color you want)
}
ul#nav li a:visited{

}
ul#nav li a:hover{
        [COLOR="Red"]border-bottom: 1px #000000 dashed;[/COLOR]
}

now I want to show a dashed border underneath the links... when a user hovers the menu[/QUOTE]

 

[DimitriDV]

thanks, can you also explain the reason?

 

[AusQB]

thanks, can you also explain the reason?

For what exactly?

I added the id since, if you left it like it was, you would end up with something like this in the CSS:

#menu ul li a{

}

Stacking elements just looks messy and I'm not quite sure it works properly like that.

 

[TheLaw]

I am not sure why would you add an extra ID, he has already defined the the rules very nice. Instead of displaying inline try to float the LI's it should look something like this

#menu { your rules }
#menu ul { list-style:none /*(if you don't want to use list style)*/ }
#menu ul li { float:left; ... rest of code }

Give it a try and let me know.

 

[conor]

I know what AusQB means about stacking the CSS. But why add another item? Just move the existing tag to the ul and it will be even cleaner again:

<ul id="menu">
	<li><a href="#"> Test </a></li>
        	<li><a href="#"> Test </a></li>
	<li><a href="#"> Test </a></li>
	<li><a href="#"> Test </a></li>
	<li><a href="#"> Test </a></li>
</ul>

ul#menu{
	list-style-type:none;
	font-size:13px;
	font-weight:bold;
}
ul#menu li {
	display:inline;
	margin-left:110px;
}
ul#menu li a{
	color:#fff;
}
ul#menu li a:hover{
        border-bottom:1px #000 dashed;
}