CSS-Untermenü, das das Layout beeinflusstHTML

HTML-Programmierer
Anonymous
 CSS-Untermenü, das das Layout beeinflusst

Post by Anonymous »

Ich habe gerade ein Menü für meine Website mit CSS erstellt. Im Code habe ich die Menüpunkte wie üblich in einer ungeordneten Liste platziert und ein Untermenü innerhalb einer der Menüoptionen platziert. Das Problem besteht nun darin, dass, wenn das Untermenü sichtbar wird, die Layouthöhe entsprechend der Höhe des Untermenüs zunimmt. Wenn die Erklärung verwirrend ist, sehen Sie sich bitte das Bild unten an.
Image


Code: Select all

$(document).ready(function(){
$("#services").click(function(){
$("#service").toggle();
});
});

Code: Select all

body {
padding : 0;
margin : 0;
}
.layer {
display: block;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}

.layer { position: absolute; }

.background {
background: url("images/headerImage.jpg") no-repeat 50% 100%;
bottom: -20px;
background-size: cover;
position: fixed;
width: 110%;
left: -5%;
top: -5%;
z-index : -100;
}
.menuItems {
position : absolute;
width : 100%;
padding : 0;
margin : 0;
background-color : black;
height : auto;
}
.menuItems ul {
list-style-type : none;
float : right;
margin-right : 2vw;
padding : 0;
margin : 0;
}
.menuItems ul li {
display : inline-block;
padding : 0;
margin : 0;
}
.menuItems ul li a {
color : white;
text-decoration : none;
display : block;
padding : 1vw;
margin : 0;
}
.menuItems ul li a:hover {
background-color : green;
text-decoration : none;
}
.menuItems ul li ul{
display : none;
overflow : hidden;
}
.menuItems ul li ul li{
display : block;
}
.menuItems ul li ul li a{
display : block;
padding : 0;
margin : 0;
z-index : 999;
}

Code: Select all








[list]
[*]Home
[*]Why us
[*]Accomodation
[*]Conference Hall
[*]Services

Restaurant and Bar
[*]Travel
[*]Beauty care
[*]Health club & gym
[/list]

[*]Facilities
[*]Virtual tour
[*]Contact Us



Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post