menu bar problim

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

vdftr

how i make the ul2 200px width

http://jsbin.com/amikud/1/edit

coothead

Hi there vdftr,

here is some code for you to try...

[color=navy]
<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 >

<title>JS Bin</title>

<style>
ul {
    width:506px;
    height:35px;
    border-top:1px solid #000;
    margin:0 auto;
    padding:0;
    background-color:#f00;
    list-style:none;
 }
ul li {
    float:left;
    position:relative;
    border-bottom:1px solid #000;
 }
ul  a {
    display:block;
    width:80px;
    height:35px;
    padding:0 10px;
    font: bold 13px/35px arial,helvetica,sans-serif;
    text-align:center;
    border-left:1px solid #000;
 }
ul li .ak {
    border-right:1px solid #000;
 }
ul li a:hover {
    border-bottom-color:#f00;
    background-color:#00f;
    color:#f00;
}
ul li ul{
    position:absolute;
    display:none;
    width:auto;
    height:auto;
    border:1px solid #000;
    border-top:0;
    white-space:nowrap;
}
ul li:hover ul {
    display:block;
 }
ul li ul li {
    float:none;
    border-bottom:0;
 }
ul ul a {
    width:auto;
    border:0;
 }
</style>

</head>
<body>

<ul>
 <li><a href="#">Home</a>
  <ul>
   <li><a href="#">Sub 1</a></li>
   <li><a href="#">Sub 2</a></li>
   <li><a href="#">This is  a very long sub link</a></li>
  </ul></li>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 <li><a href="#" class="ak">Link 4</a></li>
</ul>

</body>
</html>[/color]

coothead

vdftr

thank you very helpful

coothead

[indent]
No problem, you're very welcome.
[/indent]

coothead

vdftr

i have new problem i want put arrow only in the first menu in the <a> element
but i is make arrow to in the sub mneu
like:
ul
li a

but is make this:

<ul>
<li><a>
ul>
<li><a>
is make arrow in the sub menu to
how i make a selector only in the first ul menu in the elemnt <A>

sorry for my english.

coothead

Hi there vdftr,

like this, perhaps...

[color=navy]
<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 >

<title>JS Bin</title>

<style>
ul {
    width:506px;
    height:35px;
    border-top:1px solid #000;
    margin:0 auto;
    padding:0;
    background-color:#f00;
    list-style:none;
 }
ul li {
    float:left;
    position:relative;
    border-bottom:1px solid #000;
 }
ul  a {
    display:block;
    width:80px;
    height:35px;
    padding:0 10px;
    font: bold 13px/35px arial,helvetica,sans-serif;
    text-align:center;
    border-left:1px solid #000;
 }
.ntd {
    text-decoration:none;
 }
.ntd span:first-of-type {
    text-decoration:underline;
 }
ul span {
    margin:0 10px;
    font-weight:bold;
 }
ul li .ak {
    border-right:1px solid #000;
 }
ul li a:hover {
    border-bottom-color:#f00;
    background-color:#00f;
    color:#f00;
}
ul li ul {
    position:absolute;
    display:none;
    width:auto;
    height:auto;
    border:1px solid #000;
    border-top:0;
    white-space:nowrap;
}
ul li:hover ul {
    display:block;
 }
ul li ul li {
    float:none;
    border-bottom:0;
 }
ul ul a {
    width:auto;
    border:0;
 }
</style>

</head>
<body>

<ul>
 <li><a class="ntd" href="#"><span>Home</span><span>&gt;</span></a>
  <ul>
   <li><a href="#">Sub 1</a></li>
   <li><a href="#">Sub 2</a></li>
   <li><a href="#">This is  a very long sub link</a></li>
  </ul></li>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 <li><a href="#" class="ak">Link 4</a></li>
</ul>

</body>
</html>[/color]

coothead