Menu & Submenu Issue [CSS]

I have been working all night - just to fix a submenu. Here is my CSS:

/*************First Menu Layer************/
#navigation {
width:820px;
background-color:#45AAFF;
height:22px;
border-bottom:1px solid #fff;
font-family:'Signika',sans-serif
}

#navigation ul {
margin:0;
padding:0
}

#navigation li {
height:22px;
float:left;
position:relative;
display:block
}

#navigation li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-right:1px solid #fff
}

#navigation li a:hover {
text-decoration:underline;
background-color:#06C
}

/*************Second Menu Layer************/
#navigation li ul {
display:none;
position:absolute
}

#navigation li:hover ul {
display:block;
text-decoration:none;
background-color:#45AAFF;
border-bottom:1px dotted #006AC3
}

#navigation li ul li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-style:none
}

#navigation li ul li a:hover {
text-decoration:none;
border-bottom:1px solid #006AC3
}

And this is my HTML:

<!DOCTYPE html>
<html>
<head>
    <link href="submenu.css" rel="stylesheet" type="text/css">

    <title></title>
</head>

<body>
    <div id="navigation">
            <ul>
                    <li>
                            <a href="#">News</a>

                            <ul>
                                    <li>
                                            <a href="#">National</a>
                                    </li>

                                    <li>
                                            <a href="#">International</a>
                                    </li>

                                    <li>
                                            <a href="#">Sport</a>
                                    </li>

                                    <li>
                                            <a href="#">Hollybood</a>
                                    </li>
                            </ul>
                    </li>

                    <li>
                            <a href="#">Technology</a>

                            <ul>
                                    <li>
                                            <a href="#">IT/Software</a>
                                    </li>

                                    <li>
                                            <a href="#">Hardware</a>
                                    </li>

                                    <li>
                                            <a href="#">Iphone</a>
                                    </li>

                                    <li>
                                            <a href="#">Neuro Science</a>
                                    </li>
                            </ul>
                    </li>

                    <li>
                            <a href="#">Sports</a>

                            <ul>
                                    <li>
                                            <a href="#">Cricket</a>
                                    </li>

                                    <li>
                                            <a href="#">Tenis</a>
                                    </li>

                                    <li>
                                            <a href="#">Badminton</a>
                                    </li>

                                    <li>
                                            <a href="#">Hockey</a>
                                    </li>
                            </ul>
                    </li>

                    <li>
                            <a href="#">Country</a>

                            <ul>
                                    <li>
                                            <a href="#">India</a>
                                    </li>

                                    <li>
                                            <a href="#">America</a>
                                    </li>

                                    <li>
                                            <a href="#">France</a>
                                    </li>

                                    <li>
                                            <a href="#">Pakistaan</a>
                                    </li>
                            </ul>
                    </li>
            </ul>
    </div>
</body>
</html>

1st problem: My Submenu block doesn't show properly. If the menu contain with more than one word, the next word go to the next line. How can I make it inline? Refer to this image: https://i.sstatic.net/9SqWf.jpg

2nd Problem: When I hover to the submenu, how can I make them standardized? Please refer to this image: https://i.sstatic.net/DULg6.jpg

One of it left empty space on the right - it suppose to show full blue background, following the longest menu.

Can somebody help me to explain and solve this issue? I just want to make them tidy.

Solution

There are some problems in the code. 1. You mentioned the element as position: absolute, but you didn't mention the perfect width for them. 2. Selector defining was the main problem in the code. 3. Padding Measurement

You can copy the whole css & Most Importantly Use Indentation Always

    /*************First Menu Layer************/
#navigation {
    width:820px;
    background-color:#45AAFF;
    height:22px;
    border-bottom:1px solid #fff;
    font-family:'Signika',sans-serif;
}

#navigation ul {
    margin:0;
    padding:0;
}

#navigation li {
    height:22px;
    float:left;
    position:relative;
    display:block;
}

#navigation>ul>li>a {
    color:#fff;
    line-height:22px;
    font-size:14px;
    text-decoration:none;
    padding:5px 15px 6px;
    border-right:1px solid #fff;
}

#navigation li a:hover {
    text-decoration:underline;
}

/*************Second Menu Layer************/
#navigation li ul {
    display:none;
    position:absolute;
}

#navigation li:hover ul {
    display:block;
    text-decoration:none;
    background-color:#45AAFF;
    border-bottom:1px dotted #006AC3;
    width: 250px;
}

#navigation li ul li{
    position: relative;
    min-width: 100%;
    padding: 5px 0px 5px 0px;
}
#navigation li ul li a {
    color:#fff;
    line-height:22px;
    font-size:14px;
    text-decoration:none;
    padding: 5px 0px 5px 0px;
    border-style:none;
    display: inline-block;
    min-width: 100%;
}

#navigation li ul li a:hover {
    text-decoration:none;
    border-bottom:1px solid #006AC3;
    background-color:#06C;
}