Hey Leute,
ich habe folgendes Problem bei meiner website, die ich versuche zu programmieren:
Ich habe eine ganz normale Navigations-bar(fixed) die ich nicht mittels display:inline zentriert habe, sondern mittels Float:left usw. Jetzt habe ich es nach langem rumprobieren auch mal geschafft ein Dropdown Untermenü für den Punkt „Account“ zu erstellen; jetzt wollte ich um mein Dropdown-untermenu einen Border setzten, der diese
- in der die unterpunkte drin sind umrandet, das klappt aber kurioser weise nicht. Der border ist zwar sichtbar, aber er ist meiner meinung nach ca. um die Hälfte der
- nach rechts verschoben…habs auch schon mit diversen
hier meine Codes:
Der Html code:
[HTML]
… ... [/HTML] die zugehörige CSS: [Code] ... #centeredmenu { clear:left; float:left; width:100%; height:80px; background:#1A1A1A; overflow:visible; position:relative; font-size:2em;
}
#centeredmenu ul
{
float:left;
list-style:none;
margin-top:10px;
padding:0;
position:relative;
left:50%;
}
#centeredmenu ul li
{
float:left;
list-style:none;
margin:0 0 0 20px;
padding:0;
position:relative;
right:50%;
text-align:center;
}
#centeredmenu ul li ul
{
position:absolute;
margin:0;
padding:0px;
border:4px solid blue;
}
#centeredmenu ul li ul li
{
float:none;
display:block;
margin:0px;
padding:0px;
}
#centeredmenu ul li > ul
{
display: none;
}
#centeredmenu ul li:hover>ul
{
display: block;
}
#centeredmenu ul li ul li a
{
border: 4px solid white;
border-bottom-left-radius:15px;
border-top-left-radius:15px;
border-bottom-right-radius:15px;
border-top-right-radius:15px;
width:120px;
height:50px;
color:grey;
text-decoration:none;
display:block;
background:black;
line-height:50px;
transition: background 0.3s ease-out; /* explorer 10 */
-webkit-transition: background 0.3s ease-out; /* chrome & safari */
-moz-transition: background 0.3 ease-out; /* firefox */
-o-transition: background 0.3 ease-out; /* opera */
}
#centeredmenu ul li ul li a:hover
{
background:grey;
border: 4px solid white;
}
#centeredmenu ul li a
{
border: 4px solid white;
border-bottom-left-radius:15px;
border-top-left-radius:15px;
border-bottom-right-radius:15px;
border-top-right-radius:15px;
width:120px;
height:50px;
color:grey;
text-decoration:none;
display:block;
background:url(navpics/navback2.jpg);
line-height:50px;
}
#centeredmenu ul li a:hover,
#centeredmenu ul li a.active:hover
{
background:url(navpics/navback.jpg);
color:#fff;
border: 4px solid #7D7D7D;
}
#centeredmenu ul li a.active
{
color:white;
background:url(navpics/navback.jpg);
}
…
[/CODE]