1 reply [Last post]
AdrianJ
AdrianJ's picture
Offline
newbie
Last seen: 6 years 31 weeks ago
Timezone: GMT+2
Joined: 2014-02-04
Posts: 1
Points: 2

Hi Everyone. I'm creating a horizontal dropdown menu in CSS and I have this code I found, but I'm at new at CSS and the parts of this CSS code I can't understand are "float:left", "display:block", "position:absolute", and "positions:relative". I would appreciate it if you could please explain what these are and what they do in the CSS code below. Below is the HTML code followed by the CSS. Thank you so much.

HTML

<div class="drop">
<ul class="drop_menu">
<li><a href='#'><b>Home</b></a></li>
<li><a href='#'><b>Query Database</b></a>
<ul>
<li><a href="trypsnodb2.html"><b>Homologues</b></a></li>
<li><a href='#'><b>rRNA Targets</b></a></li>
<li><a href='#'><b>Genomic Locations</b></a></li>
<li><a href='#'><b>References</b></a></li>
</ul>
</li>
<li><a href='#'><b>rRNA Maps</b></a></li>
<li><a href='#'><b>snoRNA Clusters</b></a></li>
<li><a href='#'><b>References</b></a></li>
</ul>
</div>
[code]
 
CSS
[code]
.drop_menu {
background:red;
list-style-type:none;
height:30px}
.drop_menu li {float:left}
.drop_menu li a {
padding:9px 20px;
display:block;
color:black;
text-decoration:none;
font-size:large;}
.drop_menu ul {
position:absolute;
left:-99px;
top:-99px;
list-style-type:none;}
.drop_menu li:hover {position:relative}
.drop_menu li:hover ul {
left:0px;
top:30px;
background:red;
padding:0px;}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:red;
font-weight:900}
.drop_menu li:hover ul li a:hover {background:#404040;}
[code]

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi AdrianJ, Maybe these will

Hi AdrianJ,
Maybe these will help: position and display

display:block on inline elements like <A> gives them dimension, you can size them how you want etc.