Creating a Functional Dropdown Menu with CSS and HTML

I recently created a test site without a drop-down menu, and here is how it looks:

Check out my site here:

Now, I want to add a simple drop-down menu for "serwery". Can anyone help me figure out what's wrong with my code?

Here's the HTML:

<!-- MENU CRAFTED NETWORK --->
<div class="menu">
    <div id="nav">
        <img class="steve" src="images/steve.png"/>
        <ul>
            <li><a href="#">STRONA GŁÓWNA</a></li>
            <li><img style="splitter" src="/CN/images/nav_splitter.png"></li>
            <li><a href="/cn2/serwery">SERWERY</a>
        <ul>
            <li><a href="http://hivemc.com/survival-games"><i class="icon-chevron-right"></i>Official Survival Games</a></li>
            <li><a href="http://hivemc.com/trouble-in-mineville"><i class="icon-chevron-right"></i>Trouble in Mineville</a></li>
            <li><a href="http://hivemc.com/the-herobrine"><i class="icon-chevron-right"></i>The Herobrine</a></li>
            <li><a href="http://hivemc.com/hide-and-seek"><i class="icon-chevron-right"></i>Hide and Seek</a></li>
            <li><a href="http://hivemc.com/splegg"><i class="icon-chevron-right"></i>Splegg</a></li>
            <li><a href="http://hivemc.com/one-in-the-chamber"><i class="icon-chevron-right"></i>One In The Chamber</a></li>
        </ul>
            </li>
            <li><img style="splitter" src="/CN/images/nav_splitter.png"></li>
            <li><a href="/forum">FORUM</a></li>
            <li><img src="/CN/images/nav_splitter.png"></li>
            <li><a href="/cn2/sklep">SKLEP  SMS</a></li>
            <li><img src="/CN/images/nav_splitter.png"></li>
            <li><a href="/cn2/wiki">FAQ</a></li>
        </ul>
    </div>
    <div class="ip"><p>IP: CRAFTED.PL</p></div>
        <div class="statystyki">
              <p>DOŁĄCZ DO <b>1267</b> GRACZY ONLINE!</p>
              <a href="http://crafted.pl/index.php" class="social"><img src="images/email.png" alt=""></a>
              <a href="/youtube" class="social2"><img src="images/youtube.png" alt=""></a>
              <a href="/email" class="social2"><img src="images/facebook.png" alt=""></a>                   
        </div><!-- KONIEC MENU -->

And here's the relevant CSS:

.menu {
    padding: 0;
    margin: 0;
    border: 0;
    height: 132px;
    position:absolute;
    top: 320px;
    background: url(../images/menu.png) repeat-x;
    width: 100%;
} 

#navi select {
        display:none;
        padding:4px 8px;
        border: 1px dotted #CCC;
        margin:3px 0px 5px 0px;
        font-family: Crafted;
        color: #807f7f;
        font-size:10pt;
        font-weight:normal;
        text-decoration:none;
}

/* Additional CSS rules go here */

.steve {
    margin: -79px 0 0 0;
    background: url(../images/steve.png) repeat-x;
    position: absolute;
    margin-left: 700px;
    float: left;
}

#navi {
    /* More styling for navigation */
}

/* You can add more custom styles here */

I found some helpful information on creating a dropdown from this tutorial: www.threestyles.com/tutorials/css-drop-down-navigation-tutorial/

If anyone can assist me in making this work and matching the design in my old picture, I would greatly appreciate it.

Answer №1

Is your id nav and not #navi?

If you want to hide the dropdown menu, use display:none as shown below. Then, in the "serwery" list item, add a class like this:

    <li class="serwery"><a href="/cn2/serwery">SERWERY</a>

Finally, make the secondary menu visible by changing its display property to block when hovering over the "serwery" list item:

    .serwery:hover > ul { 
      display: block;
      position: absolute;
      ...
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switching a div class in Angular 6 with a button click: A step-by-step guide

In this scenario, I have a div with the class name old. There is also a button that, when clicked, should toggle the div's class name between old and new. I am looking for a solution using Angular 6. Below is the code snippet: I am relatively new to ...

Learn how to dynamically switch the background image of a webpage using a button in AngularJS

Hey there, I'm currently working on incorporating interactive buttons into my website to give users the ability to customize the background. I've been experimenting with Angular to achieve this feature. So far, I've managed to change the ba ...

Printed pages featuring neatly organized two-column div layout

Forgive me if this question has already been asked, but I need some guidance: I am designing reports using HTML and CSS which are then converted into PDF format. The report requires a two-column layout on most pages, so I am using: <div class="two_col ...

What is the best way to define my background image using markup language?

I'm facing a challenge with some code that I didn't write which includes a background-image. While I want to maintain the identical appearance, I prefer to set the image in my markup rather than CSS. However, I'm unsure of how to do this. T ...

Error message notifying user that an index is not defined in an ajax

https://i.sstatic.net/AbqOp.pngThis may appear to be a repetitive question, but I assure you it's not. Despite my efforts on Google, the bug persists. The problem lies in the php script's inability to set the $_POST array to the value passed by ...

CSS - Placeholder styling not being effective when selectors are grouped

Why is Chrome successful at executing this code: .amsearch-input::-webkit-input-placeholder { color: red; } <input class="amsearch-input" placeholder="It works!" /> ...while it doesn't work in other browsers: .amsearch-input::-we ...

What is the best way to customize the text in the navigation bar at the top of the page

I'm having trouble with the Navigation Bar code in my header. The text is not staying within the header and I can't seem to fix it. Is there a CSS solution to keep the text contained within the header? <div class="header"> <img src= ...

The descendant selector in CSS fails to apply changes to the element

I am struggling to modify the border of a specific descendant element and so far I have not been successful. Despite using the correct descendant selector in the HTML below, the style change is not taking effect. If anyone has any insights on what could be ...

HTML 4.01 character and character offset attributes

I'm curious about the purpose of the charoff attribute in HTML 4.01 Transitional. Specifically, consider a table column that contains the following cells: <td>1.30</td> <td>10</td> <td>100.2</td> <td>1000 ...

The animated loading image is taking an eternity to actually load

My website is loaded with heavy front-end features and I'm using a loading gif to help with the loading process. However, I've noticed that in Safari, there is a delay before the gif loads after the background does, which takes away from the inte ...

Which specific technological platform or framework would be most suitable for constructing a similar project?

https://i.stack.imgur.com/LL1g9.png Looking at the image provided, my goal is to allow users to navigate between pages on the Home page without having to refresh the entire browser window. I believe this can be achieved using Ajax technology, am I correct ...

Having trouble getting the image to stack in the center above the text on mobile devices

When viewing the website on a desktop, everything appears correctly. However, there seems to be an issue with responsiveness on mobile and tablet devices. Specifically, I want to ensure that the image of team members stacks above their respective bio parag ...

Can anyone provide guidance on how to create this particular shadow effect using CSS?

Is there a method to use CSS to create a green shadow in that particular shape? ...

Struggling with css margins and div image constraints, seeking guidance and tips for resolution

Struggling with creating a dynamic gallery that works smoothly in jsfiddle but encounters multiple issues when integrated into WordPress. The main problem is the excessive stretching of margins between image titles and meta-data, leading to misalignment an ...

The absence of an eye icon in the password field when using bootstrap 5

I'm having trouble positioning the eyeball icon to the right side of my form when using Bootstrap v5 and FontAwesome v5. Instead, the password field is being shifted further to the right compared to the username field, and the eye icon is not displayi ...

What is the best method for fetching data from PHP to display on my Angular page?

I am struggling to retrieve data from MySQL to display on my AngularJS page, using PHP as my server-side language. I can fetch the data from my PHP file but unable to render it on my page. If you have any alternative solutions, please let me know. Below i ...

Using HTML and CSS to evenly align text in individual sections

Is it possible to recreate the exact look and feel of a justified page from a book or article online using HTML/CSS? This would include replicating the text justification with precise line breaks and setting the outer wrapper width to match the min/max-wid ...

Revise the color of the selected image

click here for image description I'd like the area's color to change when the mouse hovers over it. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA ...

Is there a way to prevent inheriting width properties? Or perhaps how can one revert back to the original width value

After installing the Thank you plugin, I noticed that the button on my test site appears to be strange. Upon further investigation, I discovered that it is inheriting #commentform textarea { width: 45%; } from my theme. While removing the width in the CSS ...

What is the best way to design an HTML table that features alternating colors for each row and column?

I recently came across this image showcasing a beautifully designed table: https://i.stack.imgur.com/6K63q.png The current HTML code I have applies colors to every even line, including the year columns and subcolumns. Is there a way to assign unique mixe ...