Значи, направих си една menu, но стои върху името на уеб страницата. Тоест, на самия background съм сложил и името на страницата където пише "Welcome to *******.com"
Немога да се сетя какво точно пробвах, но като реча да я сваля малко по-надолу за да не го закрива, все нещо ми се разбичква. Та, как да го направя да стои като хората?
Ето и кода:
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main Page</title>
<!-- Beginning of compulsory code below FOR THE TABLE-->
<link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/askldjaskd.com/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/horizontal-centering.css" media="all" rel="stylesheet" type="text/css" />
<!-- / END -->
<style type="text/css">
body {background-image:url(Images/IndexBackground+Logo.png); background-size:cover;}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<!-- Beginning of compulsory code below -->
<div class="horizontal-centering"><div><div>
<ul id="nav" class="dropdown dropdown-horizontal">
<li id="n-home"><a href="./">Home</a></li>
<li id="n-music"><a href="./" class="dir">Music</a>
<ul>
<li class="first"><a href="./" class="dir">Artists</a>
<ul>
<li class="first"><a href="./">Browse All Artists</a></li>
<li><a href="./">MTV.com Picks</a></li>
<li><a href="./">Most Popular Artists</a></li>
<li><a href="./">New Artists</a></li>
<li><a href="./">Artist Photos</a></li>
<li><a href="./">A.D.D. Bio</a></li>
<li><a href="./">First Ladies</a></li>
</ul>
</li>
<li><span class="dir">Music Videos</span>
<ul>
<li class="first"><a href="./">MTV.com Video Picks</a></li>
<li><a href="./">Video Premieres</a></li>
<li><a href="./">Most Popular Videos</a></li>
<li><a href="./">Playlists</a></li>
<li><a href="./">Top Videos by Year</a></li>
<li><a href="./">Live Performances</a></li>
<li><a href="./">The Big Ten</a></li>
<li><a href="./">Headbangers Ball</a></li>
<li><a href="./">Playlibs</a></li>
<li><a href="./">Subterranean</a></li>
<li><a href="./">Sucker Free</a></li>
<li><a href="./">Video Remixer</a></li>
</ul>
</li>
<li><a href="./">Your Music on MTV?</a></li>
<li><a href="./" class="dir">Lyrics</a>
<ul>
<li class="first"><a href="./">Search for Lyrics</a></li>
<li><a href="./">Play Lyrics Game</a></li>
</ul>
</li>
<li><span class="dir">Music Blogs</span>
<ul>
<li class="first"><a href="./">Buzzworthy Blog</a></li>
<li><a href="./">Headbangers Blog</a></li>
<li><a href="./">Play | Rhapsody Blog</a></li>
<li><a href="./">Subterranean Blog</a></li>
<li><a href="./">Sucker Free Blog</a></li>
<li><a href="./">You R Here Blog</a></li>
</ul>
</li>
<li><span class="dir">Music Shows</span>
<ul>
<li class="first"><a href="./">Dew Circuit Breakout</a></li>
<li><a href="./">Discover & Download</a></li>
<li><a href="./">MTV Live</a></li>
<li><a href="./">Spankin' New Music Week</a></li>
<li><a href="./">TRL</a></li>
<li><a href="./">Unplugged</a></li>
<li><a href="./">Yo! MTV Raps</a></li>
</ul>
</li>
<li><span class="dir">Songs</span>
<ul>
<li class="first"><a href="./">The Leak |<br/>Album Previews</a></li>
<li><a href="./">Free Downloads</a></li>
<li><a href="./">MTV Radio</a></li>
<li><a href="./">Listen on Rhapsody</a></li>
</ul>
</li>
<li><span class="dir">Genres</span>
<ul>
<li class="first"><a href="./">Rock</a></li>
<li><a href="./">Pop</a></li>
<li><a href="./">Hip-Hop</a></li>
<li><a href="./">Soul/R&B</a></li>
<li><a href="./">Indie</a></li>
</ul>
</li>
<li><a href="./">Billboard Charts</a></li>
</ul>
</li>
<li id="n-shows"><a href="./" class="dir">Shows</a>
<ul>
<li class="first"><a href="./"><strong>TV Schedule</strong></a></li>
<li><a href="./">MTV Shows Gossip</a></li>
<li><a href="./">Show Photos</a></li>
<li><a href="./">Be on MTV</a></li>
<li><a href="./">Shop MTV Shows</a></li>
</ul>
</li>
<li id="n-news"><a href="./" class="dir">News</a>
<ul>
<li class="first"><a href="./">News Main</a></li>
<li><span class="dir">Headlines</span>
<ul>
<li class="first"><a href="./">Breaking News</a></li>
<li><a href="./">Music News</a></li>
<li><a href="./">Movie News</a></li>
<li><a href="./">Video Game News</a></li>
<li><a href="./">World/National News</a></li>
</ul>
</li>
<li><a href="./">Video Updates & Interviews</a></li>
<li><a href="./">Newsroom Blog</a></li>
<li><span class="dir">Live Music Coverage</span>
<ul>
<li class="first"><a href="./">Your Uploads</a></li>
<li><a href="./">You R Here Blog</a></li>
</ul>
</li>
<li><span class="dir">MTV Reporters</span>
<ul>
<li class="first"><a href="./">Liz Hernandez</a></li>
<li><a href="./">Tim Kash</a></li>
<li><a href="./">Kurt Loder</a></li>
<li><a href="./">John Norris</a></li>
<li><a href="./">SuChin Pak</a></li>
<li><a href="./">Sway</a></li>
</ul>
</li>
<li><a href="./">Video Games Blog</a></li>
<li><a href="./">Street Team '08</a></li>
<li><a href="./">Hottest MCs</a></li>
<li><a href="./">News Alerts</a></li>
</ul>
</li>
<li id="n-movies"><span class="dir">Movies, Games & More</span>
<ul>
<li class="first"><a href="./" class="dir">Movies</a>
<ul>
<li class="first"><a href="./">Movies Main</a></li>
<li><a href="./">2008 Movie Awards</a></li>
<li><a href="./">Movies News</a></li>
<li><a href="./">Movies Blog</a></li>
<li><a href="./">Trailers</a></li>
<li><a href="./">Kurt Loder Film Reviews</a></li>
<li><a href="./">Summer Movies</a></li>
<li><a href="./">Interviews</a></li>
<li><a href="./">Red Carpet & On Set Photos</a></li>
<li><a href="./">MTV Movies Shop</a></li>
</ul>
</li>
<li><a href="./" class="dir">Video Games</a>
<ul>
<li class="first"><span class="dir">Features</span>
<ul>
<li class="first"><a href="./">Rock Band</a></li>
<li><a href="./">The Dime</a></li>
<li><a href="./">Hot Trailers</a></li>
<li><a href="./">The G-Hole</a></li>
<li><a href="./">Trailers and Game Videos</a></li>
<li><a href="./">Podcast</a></li>
</ul>
</li>
<li><a href="./" class="dir">News</a>
<ul>
<li class="first"><a href="./">Multiplayer Blog</a></li>
<li><a href="./">Multiplayer Video</a></li>
<li><a href="./">Games News</a></li>
</ul>
</li>
<li><a href="./">Gamer's Week</a></li>
</ul>
</li>
<li><a href="./" class="dir">Online Games</a>
<ul>
<li class="first"><a href="./">Action Games</a></li>
<li><a href="./">Brain Games</a></li>
<li><a href="./">Classic Games</a></li>
<li><a href="./">MTV Original Games</a></li>
</ul>
</li>
<li><a href="./">Activism</a></li>
<li><a href="./" class="dir">Mobile</a>
<ul>
<li class="first"><span class="dir">MTV Shows</span>
<ul>
<li class="first"><a href="./">A.D.D. Bio</a></li>
<li><a href="./">Beavis and Butthead</a></li>
<li><a href="./">The Hills</a></li>
<li><a href="./">Kaya</a></li>
<li><a href="./">MTV2</a></li>
<li><a href="./">mtvU</a></li>
<li><a href="./">Run's House</a></li>
<li><a href="./">Sucker Free on MTV</a></li>
<li><a href="./">TRL</a></li>
<li><a href="./">Yo Momma</a></li>
</ul>
</li>
<li><a href="./">Ringtones</a></li>
<li><a href="./">Graphics</a></li>
<li><a href="./">Games</a></li>
<li><a href="./">Alerts</a></li>
<li><a href="./">Video</a></li>
</ul>
</li>
<li><a href="./">Contest & Sweepstakes</a></li>
</ul>
</li>
</ul>
</div></div></div>
<!-- / END -->
</div>
</div>
</body>
</html>
dropdown.css
@charset "UTF-8";
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
default.ultimate.css
@charset "UTF-8";
@import "default.css";
ul.dropdown a,
ul.dropdown span {
display: block;
padding: 5px 30px;
}
/* -- Base style override -- */
ul.dropdown li {
padding: 0;
}
ul.dropdown ul a,
ul.dropdown ul span {
padding: 8px;
}
ul.dropdown *.dir {
padding: 5px 30px;
}
ul.dropdown ul *.dir {
padding: 8px 30px 8px 8px;
}
ul.dropdown ul a {
width: 133px;
}
ul.dropdown ul a.dir {
width: 111px;
}
/* -- Drop-down open -- */
ul.dropdown li:hover > *.dir {
background-color: #3d3d3d;
}
ul.dropdown li:hover > a.dir:hover {
background-color: #4698ca;
color: #fff;
}
ul.dropdown ul li:hover > *.dir {
background-color: #4c4c4c;
background-image: url(../../../../images/ssss.com/comnav-arrowover.png);
}
ul.dropdown ul li:hover > a.dir:hover {
background-image: url(../../../../images/ssss.com/comnav-arrowon.png);
color: #fff;
}
ul.dropdown ul ul li:hover > *.dir {
background-color: #595959;
background-image: url(../../../../images/ssss.com/comnav-arrowover2.png);
color: #fff;
}
|
Слагай кода си в JSFiddle: http://jsfiddle.net/FkBbL/
